<link rel="stylesheet" href="/static/Admin/css/fileinput.min.css">
<script src="/static/Admin/js/fileinput.min.js"></script>
<script src="/static/Admin/js/zh.js"></script>
<div id="feedback">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">问题反馈</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1">
                问题模块
            </div>
            <div class="col-md-11">
                <select name="" id="" class="form-control" v-model="menu_id">
                    <option value="">{:strtoupper(lang('please_select'))}</option>
                    <option :value="item.id" v-for="(item,index) in menus">
                        <template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>
                        {{item.content}}
                    </option>
                </select>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-1">
                问题图片
            </div>
            <div class="col-md-11">
                <input id="input-id" name="file" type="file" data-show-caption="true">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="margin-top: 1rem">
                <textarea v-model="content" class="form-control" name="" id=""
                          style="height: 15vh;resize:none"></textarea>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>取消
        </button>
        <button type="button" class="btn btn-primary" :disabled="isdisadble" @click="savebtn"
                style="padding-left:24px;padding-right:24px">
            <span class="glyphicon glyphicon-floppy-disk"></span>保存
        </button>
    </div>
    <input type="hidden" id="controller" value="{$controller}">
    <input type="hidden" id="action" value="{$action}">
    <input type="hidden" id="imgurl" value="">
</div>
<script>
    var table = new Vue({
        el: '#feedback',
        data: {
            menus: [],
            menu_id: '',
            isdisadble: false,
            content: '',
            menu_id: ''
        },
        methods: {
            //数据所有获取
            getAllList(){
                $('.loding').show();
                $.ajax({
                    url: "/admin/login/feedback",
                    type: 'post',
                    data: {
                        getmenu: '',
                        controller: $('#controller').val(),
                        action: $('#action').val(),
                    },
                    dataType: "json",
                    success: (result) => {
                        this.menus = result.menu;
                        this.menu_id = result.menu_id;
                        $('.loding').hide();
                    }
                })
            },
            //问题反馈提交
            savebtn(){
                this.isdisadble = true;
                $.ajax({
                    url: '/admin/login/feedback',
                    data: {
                        menu_id: this.menu_id,
                        content: this.content,
                        imgurl:$('#imgurl').val(),
                        savefeedback: '',
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (res) => {
                        if (res.status != 1) {
                            change_mes_type('.modal-body .alert', res.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + res.msg + '<br>')
                        } else {
                            var controller=$('#controller').val();
                            var action=$('#action').val();
                            change_mes_type('.alert', res.status)
                            $('.alert').show()
                            $('.alert p').html('*' + res.msg + '<br>')
                            $('#feedback_newModal').modal('toggle');
                            if(controller=='Problem'){
                              if(action=='feedback' || action=='feedindex'){
                                setTimeout(function (){
                                    location.reload();
                                }, 2000);
                              }
                            }
                        }
                        this.isdisadble = false;
                    }
                })
            }
        },
        created(){
            this.getAllList()
        }
    })
    $(function () {
        initFileInput("input-id");
    })
    //初始化上传图片设置
    function initFileInput(ctrlName) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: "/admin/login/messageupload", //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png','jpeg'],//接收的文件后缀
            uploadAsync: true, //默认异步上传
            showUpload: false, //是否显示上传按钮
            showRemove : false, //显示移除按钮
            showPreview : true, //是否显示预览
            showCaption: true,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: false,//是否显示拖拽区域
//            minImageWidth: 10, //图片的最小宽度
//            minImageHeight: 10,//图片的最小高度
//            maxImageWidth: 15,//图片的最大宽度
//            maxImageHeight: 15,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            minFileCount: 1,
            //maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            previewSettings:{
                image: {width: "117px", height: "124px"},
            },
            layoutTemplates :{
                //actionDelete:'', //去除上传预览的缩略图中的删除图标
                //actionUpload:'',//去除上传预览缩略图中的上传图片；
                //actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
            },
        }).on("filebatchselected",function (event, data, id, index){
            $(this).fileinput("upload");
        }).on("fileuploaded", function (event, data, previewId, index) {
                 resdata=data.response
                 change_mes_type('.modal-body .alert', resdata.status)
                 $('.modal-body .alert').show()
                 $('.modal-body .alert p').html('*' + resdata.msg + '<br>')
                if(resdata.status==1){
                     //上传成功
                    $('#imgurl').val(resdata.imgurl)
                }

        }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
            resdata=data.response
            change_mes_type('.modal-body .alert', resdata.status)
            $('.modal-body .alert').show()
            $('.modal-body .alert p').html('*' + resdata.msg + '<br>')
        })
    }
</script>